<template>
  <div class="device">
    <div id="chart" ref="chartRef"></div>
    <div class="legend">
      <div class="legend_item" v-for="(item, index) in legendList" :key="index">
        <i></i>
        <div class="legend_info">{{ item.info || '-' }}</div>
        <div>{{ item.value || 0 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts/theme/macarons'

let chart
const chartRef = ref()
const legendList = ref([
  {
    info: '已接入',
    value: 40,
  },
  {
    info: '未接入',
    value: 8,
  },
])

const init = () => {
  if (chart) chart.clear()
  chart = echarts.init(chartRef.value)
  const option = {
    series: [
      {
        type: 'gauge',
        radius: '90%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 1,
        itemStyle: {
          color: '#58D9F9',
          shadowColor: 'rgba(0,138,255,0.45)',
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
        pointer: {
          icon: 'circle',
          length: '20%',
          width: 20,
          offsetCenter: [0, '-82%'],
          itemStyle: {
            color: '#5DCFE7',
            borderColor: '#fff',
            borderWidth: 4,
            z: 2,
          },
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 12,
            color: [
              [
                0.7,
                {
                  type: 'linear',
                  x: 0, // 渐变起点 x（0-1）
                  y: 0, // 渐变起点 y
                  x2: 1, // 渐变终点 x
                  y2: 0, // 渐变终点 y
                  colorStops: [
                    { offset: 0, color: '#0f95af' }, // 起始颜色
                    { offset: 1, color: '#5dcfe7' }, // 结束颜色
                  ],
                },
              ],
              [
                1,
                {
                  type: 'linear',
                  x: 0, // 渐变起点 x（0-1）
                  y: 0, // 渐变起点 y
                  x2: 1, // 渐变终点 x
                  y2: 0, // 渐变终点 y
                  colorStops: [
                    { offset: 0, color: '#e0e9f4' }, // 起始颜色
                    { offset: 1, color: '#c2ccd9' }, // 结束颜色
                  ],
                },
              ],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 16,
          color: '#797A7A',
        },
        detail: {
          offsetCenter: [0, -40],
          valueAnimation: true,
          formatter: function (value) {
            return '{value|' + 48 + '}'
          },
          rich: {
            value: {
              fontSize: 30,
              fontWeight: 'bolder',
              color: '#000',
            },
          },
        },
        data: [
          {
            value: 0.7,
            name: '设备总数',
          },
        ],
      },
    ],
  }
  chart.setOption(option)
  addEventListener(
    'resize',
    () => {
      chart.resize()
    },
    false,
  )
}
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.device {
  position: relative;
  width: 100%;
  height: 100%;
  #chart {
    height: 100%;
    width: 100%;
  }
  .legend {
    position: absolute;
    width: fit-content;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    &_item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      font-size: 34px;
      color: #121212;
      line-height: 34px;
      padding: 0 61px;
      border-right: 1px solid #121212;
      &:last-child {
        border-right: none;
        i {
          background: linear-gradient(360deg, #e0e9f4 0%, #c2ccd9 100%);
        }
      }
    }
    i {
      width: 20px;
      height: 20px;
      background: linear-gradient(360deg, #5dcfe7 0%, #0f95af 100%);
    }
    &_info {
      margin: 0 48px 0 8px;
    }
  }
}
</style>
